<template>
  <div class="stats-part-use stats-panel-body">
    <div class="stats-panel-head stats-form">
      <h3>{{$t('report.statistics.title49')}}
        <el-popover trigger="hover">
          <ul>
            <li>{{ `${$t('report.part.name')}-${$t('report.part.title1')}` }}</li>
            <li>{{ `${$t('report.part.name')}-${$t('report.part.title2')}` }}</li>
            <li>{{ `${$t('personal.modal.tabData.spareParts')}-${$t('report.part.title3')}` }}</li>
            <li>{{ `${$t('personal.modal.tabData.spareParts')}-${$t('report.part.title4')}` }}</li>
          </ul>
          <stats-popover-icon slot="reference"></stats-popover-icon>
        </el-popover>
      </h3>
      <biz-team-select class="stats-team-select biz-team-select" is-auto-select-child collapse multiple :value="tag" @input="chooseCategoryTeam" :fetch-func="fetchTeam"/>

      <!-- <div class="stats-form-group">
        <select @change="chooseCategoryTeam">
          <option value="">全部团队</option>
          <option v-for="team in teams" :key="team.id" :value="team.id">{{team.name}}</option>
        </select>
      </div> -->
    </div>
    <div style="text-align: center;">
      <div class="stats-btn-group">
        <button
          type="button"
          v-for="btn in btnOptions"
          :class="{'stats-checked': categoryType == btn.value}"
          @click="chooseCategoryType(btn.value)">
          {{ btn.name }}
        </button>
      </div>
    </div>
    <div class="category-chart-wrap">
      <div id="categoryPartUse"></div>
      <div class="stats-table-expand no-border" v-if="categoryType != 'applyType'">
        <button type="button" @click="categoryMore" :disabled="!moreBtn">
          <span v-if="moreBtn" class="load-more-data-btn">{{$t('common.base.tip.loadMore')}}</span>
          <span v-if="!moreBtn && !categoryEmpty" class="disabled-load-more-data-btn">{{$t('common.base.tip.loadedAllRes2')}}</span>
        </button>
      </div>
      <stats-chart-empty v-if="categoryEmpty">{{$t('common.base.tip.noData')}}</stats-chart-empty>
    </div>
    <div class="stats-staff-category-wrap" v-if="showTable">
      <div class="stats-table-header">
        <h3>{{ $t('report.part.title5') }}</h3>

        <button type="button" class="btn btn-primary btn-sm" @click="exportData" v-if="isButtonDisplayed && exportAuth">{{ $t('common.base.export') }}</button>          
        <button type="button" class="btn btn-primary btn-sm" @click="exportAllData" v-if="isButtonDisplayed && exportAuth">{{ $t('common.base.exportAll') }}</button>
        <button type="button" class="btn btn-primary btn-sm" @click="showTable = false">{{ $t('common.base.collapse') }}</button>
      </div>
      <div>
        <el-table :data="page.list" border class="stats-table">

          <el-table-column :label="$t('common.part.category')" v-if="this.categoryType == 'applyType'" prop="sparepart.type"></el-table-column>
          <el-table-column :label="$t('common.part.partNo')" prop="sparepart.serialNumber" :show-overflow-tooltip="false">
            <template slot-scope="scope">
              <sample-tooltip :row="scope.row.sparepart">
                <template slot="content" slot-scope="{isContentTooltip}">
                  <el-tooltip :content="scope.row.sparepart.serialNumber" placement="top" :disabled="!isContentTooltip">
                    <span>{{ scope.row.sparepart.serialNumber }}</span>
                  </el-tooltip>
                </template>
              </sample-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('common.form.preview.sparepart.colum1')" prop="sparepart.name"></el-table-column>
          <el-table-column width="150" :label="$t('common.label.sparepartStandard')" prop="sparepart.standard"></el-table-column>
          <el-table-column :label="$t('common.label.taskNo')" v-if="this.categoryType == 'applySingle'" width="150px">
            <template slot-scope="scope">
              <a
                href="#"
                :data-id="scope.row.taskId"
                @click.prevent="openDetail(scope.row)"
              >
                {{ scope.row.taskNo }}
              </a>
            </template>
          </el-table-column>
          <el-table-column :label="$t('common.label.productName')" v-if="this.categoryType == 'applySingle'" width="150px">
            <template slot-scope="scope" v-if="scope.row.product && scope.row.product.length">
              <div>
                <span v-for="(item, index) in scope.row.product" :key="item.productId">
                  <a
                    href="#"
                    @click.prevent="openProductDetail(item)"
                  >
                    {{item.productName}}
                  </a>
                  <span v-if="getIsShow(index, scope.row.product.length)">、</span>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('common.customer.customerName')" v-if="this.categoryType == 'applySingle'" prop="customerName" min-width="240px"></el-table-column>
          
          <el-table-column v-if="this.categoryType == 'applySingle'" :label="$t('common.label.operator')" min-width="120px">
            <template slot-scope="scope">
              <template v-if="isOpenData">
                <open-data type="userName" :openid="scope.row.executorStaffId"></open-data>
              </template>
              <template v-else>
                {{ scope.row.executorName }}
              </template>
            </template>
          </el-table-column>

          <el-table-column :label="$t('common.label.operationTime')" v-if="this.categoryType == 'applySingle'" width="180px">
            <template slot-scope="scope">
              {{scope.row.createTime | fmt}}
            </template>
          </el-table-column>
          <el-table-column v-if="this.categoryType == 'personalNum' || this.categoryType == 'personalPrice'" :label="$t('report.part.label1')" prop="userName" min-width="120px">
            <template slot-scope="scope">
              <template v-if="isOpenData">
                <open-data type="userName" :openid="scope.row.staffId"></open-data>
              </template>
              <template v-else>
                {{ scope.row.userName }}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="120" v-if="this.categoryType == 'applySingle' || this.categoryType == 'applyPrice'" :label="$t('common.form.preview.serviceItem.colum5')" prop="num"></el-table-column>
          <el-table-column width="120" v-if="this.categoryType == 'personalNum' || this.categoryType == 'personalPrice'" :label="$t('common.base.quantity')" prop="num"></el-table-column>
          <el-table-column width="120" v-if="this.categoryType == 'applyType'" :label="$t('common.base.quantity')" prop="number"></el-table-column>
          <el-table-column :label="$t('report.part.label2')" v-if="this.categoryType != 'applySingle' && this.categoryType != 'applyType'" prop="sparepart.salePrice">
            <template slot-scope="scope">
              {{ scope.row.sparepart.salePrice.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination class="stats-pagination"
                       background @current-change="jump"
                       :current-page="page.pageNum"
                       layout="total, prev, pager, next"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { t } from '@src/locales';
import { isOpenData, openAccurateTab } from '@src/util/platform';
/* global AMap, moment, _init_data*/
import _ from 'lodash';
import qs from 'src/util/querystring';
import http from 'src/util/HttpUtil';
import echarts from 'packages/Echarts';
import Loading from 'packages/BaseLoading';
import BaseCheckbox from 'packages/BaseCheckbox.vue';
import SampleTooltip from 'packages/SampleTooltip'
import { checkButtonDisplayed } from '@src/util/dom';
import { nearDateBy, dayTimeEnd } from 'pub-bbx-utils'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
let categoryPartUse = null;

export default {
  name: 'stats-part-use',
  props: {
    categoryStartTime:{
      type: Number,
      default: +nearDateBy(6, 'day')
    },
    categoryEndTime:{
      type: Number,
      default: +dayTimeEnd()
    },
    auths: {
      type: Object,
      default: () => ({})
    },
    chartType: {
      type: String
    }
    // teams:{
    //   type:Array,
    //   default:[]
    // }
  },
  computed: {
    exportAuth() {
      let initData = JSON.parse(sessionStorage.getItem('_init_data'))
      return initData.auths?.REPORT_EXPORT || 0
    },
  },
  data(){
    return {
      isOpenData,
      isButtonDisplayed: checkButtonDisplayed(),
      tag: [],
      categoryTeamId: '', // 选中的团队ID

      categoryType: 'applyType', // tab
      aboutTab:{ // 每个tab下对应的数据
        applyType:{
          title: `${t('report.part.name')}-${t('report.common.cateStatistics')}`,
          echatr_url: ['post', '/api/report/outside/stats/sparepart/usageCategoryPie'],
          table_url: ['get', '/api/report/outside/stats/sparepart/usageCategoryTable'],
          export_url:'/api/report/outside/stats/sparepart/exportUsageCategory',
          export_all_url:'/api/report/outside/stats/sparepart/exportUsageCategory',
          data:[],
          total:0,
          flag:false // 是否已经请求过该tab下的数据
        },
        applySingle:{
          legend: [t('report.part.title7')],
          title: `${t('report.part.name')}-${t('report.part.title8')}`,
          color: ['#6da9e7'],
          echatr_url: ['post', '/api/report/outside/stats/sparepart/usageAmountHistogram'],
          table_url: ['get', '/api/report/outside/stats/sparepart/usageAmountTable'],
          export_url:'/api/report/outside/stats/sparepart/exportUsageAmount',
          export_all_url:'/api/report/outside/stats/sparepart/exportUsageAmountAll',
          totalNum:0,
          data:[],
          page:1,
          total:0,
          flag:false // 是否已经请求过该tab下的数据
        },
        applyPrice:{
          legend: t('report.part.title9'),
          title:  [`${t('report.part.name')}-${t('report.part.title10')}`],
          color: ['#6da9e7'],
          echatr_url: ['post', '/api/report/outside/stats/sparepart/usagePriceHistogram'],
          table_url: ['post', '/api/report/outside/stats/sparepart/usagePriceTable'],
          export_url:'/api/report/outside/stats/sparepart/exportUsagePrice',
          export_all_url:'/api/report/outside/stats/sparepart/exportUsagePriceAll',
          totalNum:0,
          totalPrice:0,
          data:[],
          page:1,
          total:0,
          flag:false
        },
        personalNum:{
          legend: [t('report.part.title7')],
          title:`${t('personal.modal.tabData.spareParts')}-${t('report.part.title8')}`,
          color: ['#6da9e7'],
          echatr_url: ['post', '/api/report/outside/stats/sparepart/personalByUserHistogram'],
          table_url: ['get', '/api/report/outside/stats/sparepart/personalByUserTable'],
          export_url:'/api/report/outside/stats/sparepart/exportPersonalByUser',
          export_all_url:'/api/report/outside/stats/sparepart/exportPersonalByUserAll',
          totalNum:0,
          totalPrice:0,
          data:[],
          page:1,
          total:0,
          flag:false
        },
        personalPrice:{
          legend: [t('report.part.title9')],
          title:`${t('personal.modal.tabData.spareParts')}-${t('report.part.title10')}`,
          color: ['#6da9e7'],
          echatr_url: ['post', '/api/report/outside/stats/sparepart/personalBySparepartHistogram'],
          table_url: ['get', '/api/report/outside/stats/sparepart/personalBySparepartTable'],
          export_url:'/api/report/outside/stats/sparepart/exportPersonalBySparepart',
          export_all_url:'/api/report/outside/stats/sparepart/exportPersonalBySparepartAll',
          totalNum:0,
          totalPrice:0,
          data:[],
          page:1,
          total:0,
          flag:false
        }
      },
      moreBtn:true, // 是否显示加载更多
      categoryEmpty:false, // 是否显示暂无数据
      
      showTable: false, // 是否展示表单
      model: { // 点击柱状图参数
        pageNum: 1,
        partId:''
      },
      page: {}, // 表格数据

      loading: true,

      btnOptions: [
        {
          value: 'applyType',
          name: `${t('report.part.name')}-${t('common.part.category')}`,
          // 用于导出埋点，如有更新，需要同步下埋点文档
          trackLabel: 'APPLY_TYPE'
        },
        {
          value: 'applySingle',
          name: `${t('report.part.name')}-${t('common.base.quantity')}`,
          trackLabel: 'APPLY_SINGLE',
        },
        {
          value: 'personalNum',
          name: `${t('common.label.personalSparePartStore')}-${t('common.base.quantity')}`,
          trackLabel: 'PERSONAL_NUM',
        },
        {
          value: 'personalPrice',
          name: `${t('common.label.personalSparePartStore')}-${t('task.detail.components.money')}`,
          trackLabel: 'PERSONAL_PRICE',
        }
      ]
    }
  },
  methods: {
    getIsShow(index, totalLength) {
      return index < (totalLength -1)
    },
    // 打开工单详情
    openDetail(row) {
      const fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        fromId,
        type: PageRoutesTypeEnum.PageTaskView,
        key: row.taskId,
        params: 'noHistory=1'
      })
    },
    fetchTeam(params){
      return http.post('/security/tag/tree', {...params, ...{authKey: 'VIP_REPORT_VIEW'}})
    },
    exportData(){ // 导出
      let model = {};
      if(this.categoryType == 'applySingle' || this.categoryType == 'applyPrice') {
        model.tagId = this.categoryTeamId;
        model.partId = this.model.partId;
        model.timeStart = this.categoryStartTime;
        model.timeEnd = this.categoryEndTime;
      }
      if(this.categoryType == 'personalNum') model.userId = this.model.userId;
      if(this.categoryType == 'personalPrice') {
        model.partId = this.model.partId;
        model.tagId = this.categoryTeamId;
      }    
      if(this.categoryType == 'applyType') {
        model.type = this.model.type;
        model.tagId = this.categoryTeamId;
        model.timeStart = this.categoryStartTime;
        model.timeEnd = this.categoryEndTime;
      }
      window.location.href = `${this.aboutTab[this.categoryType].export_url }?${ qs.stringify(model)}`;

      this.exportTrack(false)
    },
    exportAllData(){ // {{ $t('common.base.exportAll') }}
      let model = {
        tagId:this.categoryTeamId
      };
      if(this.categoryType == 'applySingle' || this.categoryType == 'applyPrice') {
        model.timeStart = this.categoryStartTime;
        model.timeEnd = this.categoryEndTime;
      }
      if(this.categoryType == 'applyType') {
        model.tagId = this.categoryTeamId;
        model.timeStart = this.categoryStartTime;
        model.timeEnd = this.categoryEndTime;
      }
      window.location.href = `${this.aboutTab[this.categoryType].export_all_url }?${ qs.stringify(model)}`;

      this.exportTrack(true)
    },
    exportTrack(isExportAll) {
      const tab = this.btnOptions.find(v => v.value === this.categoryType).trackLabel
      window.parent.postMessage({
        message: 'exportTrack',
        isExportAll,
        chartType: this.chartType,
        tab
      }, '*')
    },
    async initCategory(){ // 页面初始化
      categoryPartUse = echarts.init(document.getElementById('categoryPartUse'));
      categoryPartUse.on('click', event => {
        let origin = event.data._origin;               

        this.model.pageNum = 1;
        if(this.categoryType == 'applyType') {
          this.model.type = origin.name;
        } else if(this.categoryType == 'personalNum') {
          this.model.userId = origin.userSparepart.userId;
        } else {
          this.model.partId = origin.sparepart.id;
        }       
        
        this.renderTable()
      })

      this.renderCategory();
    },
    chooseCategoryTeam(value){ // 选择团队
      this.$emit('trackEvent', 'chooseTeam');

      // let tag = (Array.isArray(value) ? value[0] : value) || {};
      let tag = value
      this.tag = value;
      this.categoryTeamId = tag.map(item => {return item.id}).join(',');
      this.clear();
      this.renderCategory();

      this.chartType && this.$track.commonFn.chartTrack(this.chartType, 'REPORT_SEARCH_TEAM', this.$track)
    },
    chooseCategoryType(type){ // tab切换
      this.$emit('trackEvent', type);

      this.categoryType = type;
      this.moreBtn = true;
      if(!this.aboutTab[type].flag) {
        this.renderCategory();
      } else {
        this.setCategoryOption();
      }      
    },
    async renderCategory(){ // 获取柱状图数据并且显示
      try {
        let instance = Loading.show(this.$el);
        this.$emit('disable', true);
        let data = await this.fetchCategoryData();
        this.aboutTab[this.categoryType].data = this.aboutTab[this.categoryType].data.concat(data.list);
        this.aboutTab[this.categoryType].flag = true;
        this.aboutTab[this.categoryType].total = data.total;
        this.aboutTab[this.categoryType].totalNum = data.totalNum;
        if(this.categoryType == 'personalPrice' || this.categoryType == 'applyPrice' || this.categoryType == 'personalNum'){
          this.aboutTab[this.categoryType].totalPrice = data.totalPrice;
        }

        instance.hide();
        this.$emit('disable', false);
      
        this.setCategoryOption();
      } catch (error) {
        console.log(error)
      }
    },
    fetchCategoryData(){ // 获取柱状图数据
      let params = {
        tagId:this.categoryTeamId,
      };

      if(this.categoryType == 'applySingle' || this.categoryType == 'applyPrice') {
        params.timeStart = this.categoryStartTime;
        params.timeEnd = this.categoryEndTime;
        params.pageSize = 10;
        params.pageNum = this.aboutTab[this.categoryType].page;
      }
      if(this.categoryType == 'personalPrice' || this.categoryType == 'personalNum') {
        params.pageSize = 10;
        params.pageNum = this.aboutTab[this.categoryType].page;
      }
      if(this.categoryType == 'applyType') {
        params.timeStart = this.categoryStartTime;
        params.timeEnd = this.categoryEndTime;
      }
      const [method, url] = this.aboutTab[this.categoryType].echatr_url
      return http[method](url, params).then(async res=>{
        if (this.isOpenData && this.categoryType == 'personalNum') {
          if (window.WWOpenData?.initCanvas) {
            window.WWOpenData.initCanvas()
            window.WWOpenData.enableCanvasSharing()
          }
          let originItems = res.list || []
          let items = originItems.map(item => {
            return {
              type: 'userName',
              id: item.userSparepart.staffId
            }
          })
          
          const result = await new Promise((resolve, reject) => {
            window.WWOpenData.prefetch({ items }, (err, data) => {
              if (err) {
                return reject(err)
              }
              resolve(data)
            })
          })

          try {
            res.list = originItems.map((item, index) => {
              return Object.assign(item, { userSparepart: {
                ...item.userSparepart,
                userName: result.items[index].data,
              } })
            })
          } catch (error) {
            console.warn(error)
          }
        }

        return res
      })
    },
    categoryMore(){ // 加载更多柱状图数据  
      this.aboutTab[this.categoryType].page ++;   
      this.renderCategory();
    },
    setCategoryOption(){ // 使用指定的配置项和数据显示图表。
      this.categoryEmpty = false;
      categoryPartUse && categoryPartUse.clear();

      let option = null;
      let outOption;
      
      if(this.categoryType == 'applyType') {
        outOption = this.getTypeCategoryOutOption();
        if(outOption) option = this.getTypeCategoryOption(outOption);
      } else {
        outOption = this.getCategoryOutOption();
        if(outOption) option = this.getCategoryOption(outOption);
      }
      
      
      if(null == option){
        this.categoryEmpty = true;
        this.moreBtn = false;
        return
      }
      if(this.aboutTab[this.categoryType].data.length >= this.aboutTab[this.categoryType].total) {
        this.moreBtn = false;
      }

      categoryPartUse && categoryPartUse.setOption(option);
    },
    getTypeCategoryOutOption(){
      let obj = this.aboutTab[this.categoryType];
      let arr = [];
      arr = obj.data || [];
      if(arr.length == 0) return null;

      let sum = 0;
      let legend = [];
      let series = [];
      let data = [];

      arr.forEach(item => {
        sum = this.$math.format(this.$math.add(this.$math.bignumber(item.number), this.$math.bignumber(sum)));
        // sum += item.number;
        legend.push(item.type);

        data.push({
          name: item.type,
          value: item.number,
          _origin: {
            name: item.type,
            value: item.number
          }
        })
      })

      series.push({
        name: t('common.label.sparepartType'),
        type: 'pie',
        radius : '55%',
        center: ['50%', '55%'],
        label: {
          normal: {
            formatter: '{b}： {c} ({d}%)'
          }
        },
        data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      });
      return {
        title: `${t('report.callConsultChart.total')}：${ sum}`,
        legend,
        series
      }
    },
    getTypeCategoryOption(option){
      let _option = {
        color: ['#2ec7c9', '#ffb980', '#5ab1ef', '#d87a80', '#5f5f6e', '#07a2a4', '#9a7fd1', '#588dd5', '#c05050', '#f5994e', '#59678c', '#7eb00a', '#749f83'],
        tooltip : {
          trigger: 'item',
          formatter: `{b} <br/> ${t('common.label.count')}: {c} ({d}%)`
        },
        title: {
          show: true,
          subtext: option.title,
          right: 100,
          top: 5,
          subtextStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        toolbox: {
          right: 40,
          top: 10,
          feature: {
            saveAsImage: {
              name: `${t('report.part.name')}-${t('report.common.cateStatistics')}`,
            }
          }
        },
        grid: {
          left: 120,
          containLabel: true
        },
        legend: {
          top: 10,
          bottom: 10,
          left: 5,
          orient: 'vertical',
          data: option.legend,
          type: 'scroll'
        },
        series: option.series
      };

      return _option;
    },
    getCategoryOutOption() { // 将获取到的数据组装成柱状图需要的格式
      let obj = this.aboutTab[this.categoryType];
      let data = [];
      data = obj.data || [];
      let info = '';
      if(data.length == 0) return null;

      let yAxisData = [];
      let partNum = [];
      let series = [];
     
      if(this.categoryType == 'applySingle'){
        data.forEach(item => {
          yAxisData.unshift(item.sparepart.name);
          partNum.unshift({
            value: item.num,
            _origin: item
          });
        });
        info = `${t('common.zhongqi.total')}：${ obj.totalNum}`;
      }
      if(this.categoryType == 'applyPrice') {
        data.forEach(item => {
          yAxisData.unshift(item.sparepart.name);
          partNum.unshift({
            value: item.sparepart.salePrice,
            _origin: item
          });
        });    
        info = `${t('common.form.preview.materialOrder.totalNumber')}：${ obj.totalNum }             ${t('report.serviceUsageCrowdReport.title5')}：${ obj.totalPrice }${t('common.base.yuan')}`;
      }
      if(this.categoryType == 'personalNum'){
        data.forEach(item => {
          yAxisData.unshift(item.userSparepart.userName);
          partNum.unshift({
            value: item.userSparepart.repertoryCount,
            _origin: item
          });
        });
        info = `${t('common.form.preview.materialOrder.totalNumber')}：${ obj.totalNum }             ${t('report.serviceUsageCrowdReport.title5')}：${ obj.totalPrice }${t('common.base.yuan')}`;
      }      
      if(this.categoryType == 'personalPrice') { 
        data.forEach(item => {
          yAxisData.unshift(item.sparepart.name);
          partNum.unshift({
            value: item.sparepart.salePrice,
            _origin: item
          });
        });
        info = `${t('common.form.preview.materialOrder.totalNumber')}：${ obj.totalNum }             ${t('report.serviceUsageCrowdReport.title5')}：${ obj.totalPrice }${t('common.base.yuan')}`;
      }
      series.push({
        name: obj.legend[0],
        type: 'bar',
        barMaxWidth: '30px',
        data: partNum,
        label: {
          normal: {
            show: true,
            position: 'insideLeft',
            color:'#333',
            formatter(v){
              return `{style|${v.data.value}}`;
            },
            rich:{
              style:{
                color: '#fff',
                fontSize: '13px',
                textBorderColor: '#6da9e7',
                textBorderWidth: 2
              }
            }
          }
        }
      })

      return {
        info,
        title: obj.title,
        legend: obj.legend,
        color: obj.color,
        yAxisData,
        series
      }
    },
    getCategoryOption(option) { // 指定图表的配置项和数据
      let yAxisData = option.yAxisData;
      let ctx = this
      let start = 0;
      let end = yAxisData.length - 1;
      if(yAxisData.length > 10) start = end - 9;
      let tooltip = {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      }
      if(['applySingle', 'personalNum', 'personalPrice'].includes(ctx.categoryType)) {
        tooltip = {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter(data){
            let html = '<div class="chart-tooltip-custom-style">';
            if(ctx.isOpenData) {
              let staffId = data[0].data._origin.userSparepart.staffId
              let id = Math.ceil(Math.random() * 1000)
              html = `<ww-open-data type="userName" openid="${staffId}" id="wwOpenData${id}"></ww-open-data>`
              setTimeout(() => {
                window.WWOpenData && window.WWOpenData.bind(document.getElementById(`wwOpenData${id}`))
              }, 500);
            }else {
              let name = data[0].axisValue;
              html += `<div>${name}</div>`;
            }

            data.forEach(item => {
              html += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>`;
            })
            html += '</div>';
            return html;
          }
        }
      }
      let _option = {
        color: option.color,
        tooltip,
        title: {
          show: true,
          subtext: option.info,
          right: 150,
          top: 0,
          subtextStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        legend: {
          data: option.legend,
          top: '10px',
          left: '70px'
        },
        grid: {
          left: '20px',
          right: '60px',
          bottom: '20px',
          top: '50px',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
              name: option.title
            }
          },
          right: 40,
          top:5
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            right: '20px',
            startValue: start,
            endValue: end,
            minValueSpan: 10,
            maxValueSpan: 30
          }
        ],
        yAxis: {
          type: 'category',
          data: option.yAxisData,
          axisLabel: {
            formatter(value) {
              if (value.length > 5) {
                return `${value.substring(0, 5) }...`;
              } 
              return value;
              
            }
          }
        },
        xAxis: {
          type: 'value'
        },
        series: option.series
      };

      return _option;
    },
    async renderTable(){ // 点击柱状图获取表格数据
      let instance = this.$loading.show(this.$el);
    
      try {
        this.page = await this.fetchTableData();
        this.showTable = true;
      } catch (error) {
        console.log(error);
      }

      instance.hide();
    },
    fetchTableData() { // 获取表格数据
      let model = {
        pageNum:this.model.pageNum
      };
      if(this.categoryType == 'applyType') {
        model.tagId = this.categoryTeamId;
        model.type = this.model.type;
        model.timeStart = this.categoryStartTime;
        model.timeEnd = this.categoryEndTime;
      } else if(this.categoryType == 'applySingle' || this.categoryType == 'applyPrice') {
        model.tagId = this.categoryTeamId;
        model.partId = this.model.partId;
        model.timeStart = this.categoryStartTime;
        model.timeEnd = this.categoryEndTime;
      } else if(this.categoryType == 'personalNum') {
        model.userId = this.model.userId;
      } else {
        model.partId = this.model.partId;
        model.tagId = this.categoryTeamId;
      }

      const [method, url] = this.aboutTab[this.categoryType].table_url
      return http[method](url, model);
    },
    jump(currentPage){ // 点击表格页数
      this.model.pageNum = currentPage;
      this.renderTable();
    },
    clear() {      
      let aboutTab = { 
        applyType:{
          data:[],
          total:0,
          flag:false // 是否已经请求过该tab下的数据
        },
        applySingle:{        
          totalNum:0,
          data:[],
          page:1,
          total:0,
          flag:false // 是否已经请求过该tab下的数据
        },
        applyPrice:{          
          totalPrice:0,
          totalNum:0,
          data:[],
          page:1,
          total:0,
          flag:false
        },
        personalNum:{          
          totalPrice:0,
          totalNum:0,
          data:[],
          page:1,
          total:0,
          flag:false
        },
        personalPrice:{          
          totalPrice:0,
          totalNum:0,
          data:[],
          page:1,
          total:0,
          flag:false
        }
      };
      for(let item in this.aboutTab) {
        _.assign(this.aboutTab[item], aboutTab[item]);
      }
      this.moreBtn = true;
      this.categoryEmpty = false;
      this.showTable = false;
    },
    initModel(){
      this.clear();
      this.renderCategory();
    },
    openProductDetail(row) {
      const fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProductView,
        key: row.productId,
        params:'noHistory=1',
        fromId
      })
    }
  },
  mounted(){
    this.initCategory();
    window.addEventListener('resize', _.debounce(function(){
      categoryPartUse.resize();
    }, 400))
  },
  watch: {
    categoryType(){
      this.showTable = false;
    }
  },
  components: {
    BaseCheckbox,
    [SampleTooltip.name]: SampleTooltip,
  }
}
</script>

<style lang="scss">
#categoryPartUse{
  height: 520px;
}
.category-chart-wrap{
  width: 100%;
  position: relative;
}
.category-more{
  text-align:center;
  color:rgb(15, 5, 168);
  height:40px;
  font-size:14px;
  text-decoration:underline;
  span{
    cursor: pointer;
  } 
}
.stats-part-head{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 15px 0;
}

.stats-part-card{
  flex: 1;
  margin-left: 15px;
  border-radius: 2px;
  background-color: #fff;
  text-align: center;

  p{
    padding: 15px;
    margin: 0;
    font-size: 14px;
  }

  h3{
    font-weight: 400;
    font-size: 24px;
    color: #2d9cf5;
    margin: 0;
    padding: 5px 0 20px 0;

    a{
      color: #2d9cf5;
    }
  }

  &:first-child{
    margin-left: 0;
  }
}
.stats-panel-body{
  background:#fff;
}
.stats-part-card-bottom{
  border-top: 1px solid #eee;
  background: #fafafa;
  border-radius: 0 0 2px 2px;
  padding: 18px 0;
  font-size: 13px;
}

.stats-part-panel{
  .stats-form{
    justify-content: flex-end;
  }
}

.stats-part-use{ 
  margin:15px 7.5px;
  .category-chart-wrap{
    height:auto;
  }
}

.load-more-data-btn {
  color: #6da9e8;
}

.disabled-load-more-data-btn {
  color: #9a9a9a;
}
</style>
